<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    * {
      cursor: url(./images/鼠标.png), pointer !important;
    }

    body {
      background: url(./images/16.jpg) no-repeat;
      background-size: 100%;
    }

    .main {
      /* display: flex; */
      /* width: 1200px; */
      position: relative;
      width: 420px;
      height: 420px;
      margin: 100px auto;
      overflow: hidden;
    }

    .btnimg {
      
      width: 4200px;
      transition: all 3s;
      animation: btnimg 6s backwards;
    }

    @keyframes btnimg {
      to {
        transform: translateX(-3280px);
      }
    }
    .biankuang{
      position: absolute;
      left: 0px;
      top: 0px;
      width: 300px;
      height: 410px;
      border: 5px dotted yellow;
    }

    .box {
      float: left;
      position: relative;
      width: 290px;
      height: 400px;
      margin-right: 110px;
      margin-left: 10px;
      margin-top: 10px;
    }

    .box .pic {
      position: absolute;
      width: 284px;
      height: 394px;
      margin-right: 10px;
      border: 1px solid #ccc;
      border-bottom: 2px solid #bbb;
      border-top: 1px solid #ddd;
      border-radius: 10px;
      overflow: hidden;
      transition: all .3s ease;
      background-image: linear-gradient(pink, rgb(248, 14, 229));
      opacity: 0;
    }

    /* .box .pic:hover{
      transform: rotateY(180deg);
    } */
    .box .pic img {
      display: block;
      width: 284px;
      height: 394px;
      /* transform-style: preserve-3d; */
    }

    .box .a1 {
      position: absolute;
      top: 0;
      left: 0;
      width: 290px;
      height: 400px;
      margin-right: 10px;
      background-color: rgb(63, 63, 63);
      border: 1px solid #ccc;
      border-bottom: 2px solid #bbb;
      border-top: 1px solid #ddd;
      border-radius: 10px;
      cursor: pointer;
      overflow: hidden;
      transition: all .3s;
      opacity: 0.9;
    }

    .box .a1:hover {
      transform: translateY(-6px);
      box-shadow: 0 26px 40px -24px rgba(0, 36, 100, .5);
      animation: move01 2s linear forwards;

    }

    @keyframes move01 {
      1% {
        opacity: 1;
      }

      25% {
        transform: rotateY(0);
      }

      62% {
        opacity: 1;
      }

      62.5% {
        transform: rotateY(90deg);
        opacity: 0;
      }

      100% {
        opacity: 0;
      }
    }

    .box:hover .pic {
      transform: translateY(-6px);
      box-shadow: 0 26px 40px -24px rgba(0, 36, 100, .5);
      animation: move02 1.5s 0.5s linear forwards;
    }

    @keyframes move02 {
      48% {
        opacity: 0;
      }

      49% {
        opacity: 1;
      }

      50% {
        transform: rotateY(90deg);

      }

      100% {
        transform: rotateY(18deg);
        opacity: 1;
      }
    }

    .box .light {
      cursor: pointer;
      position: absolute;
      left: -114%;
      top: 0;
      width: 100%;
      height: 100%;
      background-image: -webkit-linear-gradient(0deg, hsla(0, 92%, 49%, 0), rgba(255, 255, 255, 0.5), hsla(0, 0%, 100%, 0));
      transform: skewx(-16deg);

    }

    .box .a1:hover .light {
      transition: all .5s ease;
      left: 114%
    }

    .box .light01,
    .light02,
    .light03,
    .light04 {
      cursor: pointer;
      position: absolute;
      left: -114%;
      top: 0;
      width: 100%;
      height: 100%;
      background-image: -webkit-linear-gradient(0deg, hsla(0, 92%, 49%, 0), rgba(247, 6, 118, 0.603), hsla(0, 0%, 100%, 0));
      transform: skewx(-16deg);

    }

    .box:hover .light01 {
      animation: light01 .5s 2s linear forwards;
    }

    .box:hover .light02 {
      animation: light01 .5s 2s linear forwards;
    }

    .box:hover .light03 {
      animation: light01 .5s 2s linear forwards;
    }

    .box:hover .light04 {
      animation: light01 .5s 2s linear forwards;
    }

    @keyframes light01 {
      to {
        transition: all .5s ease;
        left: 114%;
      }
    }

    .box .light02 {
      background-image: -webkit-linear-gradient(0deg, hsla(0, 92%, 49%, 0), rgba(247, 6, 6, 0.616), hsla(0, 0%, 100%, 0));
    }

    .box .light03 {
      background-image: -webkit-linear-gradient(0deg, hsla(0, 92%, 49%, 0), rgba(6, 22, 247, 0.616), hsla(0, 0%, 100%, 0));
    }

    .box .light04 {
      background-image: -webkit-linear-gradient(0deg, hsla(0, 92%, 49%, 0), rgba(243, 247, 6, 0.616), hsla(0, 0%, 100%, 0));
    }

    .choujiang{
      position: absolute;
      bottom: 150px;
      left: 675px;
      width: 150px;
      height: 50px;
      border-radius: 20px;
      font-size: 30px;
      text-align: center;
      line-height: 50px;
      background-image: linear-gradient(90deg,#06ffffcb 50%,red 90%);
      text-shadow: -2px -2px 2px rgb(255 255 255), 2px 2px 2px rgb(237 15 15);
      transition: all .3s;
    }
    .choujiang:hover{
      transform: translateY(-6px) scale(1.1);
      box-shadow: 0 26px 40px -24px rgba(0, 36, 100, .5);
    }

  </style>
</head>

<body>
  <div class="main">
    <div class="biankuang"></div>
    <div class="btnimg">
      
      <div class="box">
        <script src="./草稿纸.js"></script>
        <div class="a1">
          <i class="light"></i>
        </div>
      </div>
      <div class="box">
        <div class="a1">
          <i class="light"></i>
        </div>
      </div>
      <div class="box">
        <div class="a1">
          <i class="light"></i>
        </div>
      </div>
      <div class="box">
        <div class="a1">
          <i class="light"></i>
        </div>
      </div>
      <div class="box">
        <div class="a1">
          <i class="light"></i>
        </div>
      </div>
      <div class="box">
        <div class="a1">
          <i class="light"></i>
        </div>
      </div>
      <div class="box">
        <div class="a1">
          <i class="light"></i>
        </div>
      </div>
      <div class="box">
        <div class="a1">
          <i class="light"></i>
        </div>
      </div>
      <div class="box">
        <div class="a1">
          <i class="light"></i>
        </div>
      </div>
      <div class="box">                 
        <div class="a1">
          <i class="light"></i>
        </div>       
    </div>
    </div>
  </div>
  <div class="choujiang">
    点击抽奖
  </div>
</body>

</html>